<template>
  <el-drawer :title="title" :visible.sync="dialog" direction="rtl" :with-header="false" custom-class="box_drawer"
    size="80%" ref="drawer"  :before-close="cancelForm">
    <div class="drawer_content">
      <el-form :model="form" :label-width="formLabelWidth">
        <div class="drawer_main">


          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-card class="card" shadow="never">
                <div slot="header">
                  <span class="tips">协同督查管理列表</span>
                  <!-- <el-button type="success" class="right" icon="el-icon-plus" @click="handleAdd">新增</el-button> -->
                </div>
                <el-table v-loading="listLoading" ref="listTable" stripe :data="list"
                  :element-loading-text="elementLoadingText" border
                   height="calc(100vh - 280px)">
                  <template slot="empty">
                    <el-empty :image-size="200"></el-empty>
                  </template>
                  <!-- <el-table-column show-overflow-tooltip type="selection"></el-table-column> -->
                  <!-- <el-table-column
              show-overflow-tooltip
              prop="id"
              label="序号"
              align="center"
              width="80px"              
            ></el-table-column>-->

                  <el-table-column show-overflow-tooltip prop="dept_name" label="协同部门" align="center"
                    width="300px"></el-table-column>
                  <el-table-column show-overflow-tooltip prop="assigner_name" label="具体执行人" align="center" width="180px"
                                   ></el-table-column>
                  <el-table-column show-overflow-tooltip prop="feedback_require" label="反馈要求" align="center"></el-table-column>

                  <el-table-column show-overflow-tooltip prop="is_read" label="已读/未读" align="center" width="160px">
                    <template #default="scope">
                      <el-tag type="danger" v-if="scope.row.is_read === 2 ">未读</el-tag>
                      <el-tag v-else-if="scope.row.is_read === 1">已读</el-tag>
                    </template>
                  </el-table-column>



                  <el-table-column show-overflow-tooltip prop="coordination_status" label="协同状态" align="center" width="160px">
                    <template #default="scope">
                      <el-tag type="danger" v-if="scope.row.coordination_status === 0 && scope.row.is_reject === 0">督察驳回</el-tag>
                      <el-tag type="warning" v-else-if="scope.row.coordination_status === 0">反馈中</el-tag>
                      <el-tag type="success" v-else-if="scope.row.coordination_status === 1">待督察</el-tag>
                      <el-tag v-else-if="scope.row.coordination_status === 2">督察通过</el-tag>
                    </template>
                  </el-table-column>

                  <el-table-column show-overflow-tooltip prop="is_pass" label="是否超时" align="center" width="160px">
                    <template #default="scope">
                      <el-tag type="success" v-if="scope.row.is_pass === 0">未超时</el-tag>
                      <el-tag type="danger" v-else-if="scope.row.is_pass === 1">已超时</el-tag>
                    </template>
                  </el-table-column>


                  <el-table-column show-overflow-tooltip prop="point" label="得分" align="center" width="120"></el-table-column>
<!--                  <el-table-column show-overflow-tooltip label="日志" align="center" width="120">-->
<!--                    <template #default="{ row }">-->
<!--                       <el-link type="primary" @click="handleRz(row)"  icon="el-icon-document"></el-link>-->
<!--                    </template>-->
<!--                  </el-table-column>-->
                  <el-table-column show-overflow-tooltip label="日志" align="center" width="120">
                    <template #default="{ row }">
                      <el-popover trigger="click" placement="left" width="450" >
                        <el-row :gutter="20">
                          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                            <el-card class="cardpop" shadow="never">
                              <div slot="header">
                                <span class="tips">日志记录</span>

                              </div><el-timeline :reverse="reverse">
                              <el-timeline-item
                                  v-for="(activity, index) in activities"
                                  :key="index"
                                  :timestamp="activity.operate_time">
                                {{activity.content}}
                              </el-timeline-item>
                            </el-timeline>
                            </el-card>
                          </el-col>
                        </el-row>

                        <el-button slot="reference" type="text" icon="el-icon-document" @click="handleRz(row)"></el-button>
                      </el-popover>
                    </template>
                  </el-table-column>





                  <el-table-column show-overflow-tooltip label="操作" width="160" align="center">
                    <template #default="{ row }">
                      <el-button plain @click="handleAdd(row)" type="primary" size="mini" v-show="row.coordination_status === 1">
                        督察
                      </el-button>
                      <el-button plain @click="handlecancel(row)" size="mini">
                        详情
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination background :current-page="queryForm.pageNo" :page-size="queryForm.pageSize"
                  :layout="layout" :total="total" @size-change="handleSizeChange"
                  @current-change="handleCurrentChange2"></el-pagination>
              </el-card>
            </el-col>
          </el-row>



        </div>
      </el-form>
      <div class="drawer_footer">
        <el-button @click="cancelForm" type="primary">关 闭</el-button>
        <!-- <el-button
          type="primary"
          @click="$refs.drawer.closeDrawer()"
          :loading="loading"
        >
          {{ loading ? '打印中 ...' : '打 印' }}
        </el-button> -->
      </div>
    </div>
    <edits ref="edits" @fetch-data="fetchData"></edits>
    <views ref="views" @fetch-data="fetchData"></views>
  </el-drawer>

</template>

<script>
import Edits from './components/dcedits'
import Views from '@/views/xtfk/fklist/components/view'

import {getOneLog, getPublishDeptList} from '@/api/warningOrder'
export default {
  name: 'dclist',
  components: { Edits,Views },
  data() {
    return {
      reverse: true,
      activities: [],
      title: '',
      dialog: false,
      loading: false,
      isShow: true,
      isShow1: true,
      isShow2: true,
      isShow3: true,
      queryForm: {
        pageNo: 1,
        pageSize: 10,
        warning_order_id: '',
      },
      list: null,
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      selectRows: '',
      elementLoadingText: '正在加载...',
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      formLabelWidth: '100px',
      timer: null,
    }
  },
  created() {

  },
  mounted() { },
  methods: {
    showDia(row) {
      if (!row) {
        this.title = '新增'
      } else {
        this.title = '编辑'
        this.form = Object.assign({}, row)
      }
      this.queryForm.warning_order_id = row.id;
      this.fetchData()
      this.dialog = true
    },
    close() {
      // this.$refs['form'].resetFields()
      // this.form = this.$options.data().form
      this.dialog = false
    },
    handleAdd(row) {
      if (row.id) {
        this.$refs['edits'].showDia(row)
      }
      else {
        this.$refs['edits'].showDia()
      }
    },
    handleRz(row) {
      getOneLog(row).then((res) => {
        console.log("res",res);
        this.activities = res.data;
      })
      // if (row.id) {
      //   this.$refs['rizhi'].showDia(row)
      // }
      // else {
      //   this.$refs['rizhi'].showDia()
      // }
    },
    handleSizeChange(val) {
      this.queryForm.pageSize = val
      this.fetchData()
    },
    handleCurrentChange2(val) {
      this.queryForm.pageNo = val
      this.fetchData()
    },
    handlecancel(row) {
      if (row.id) {
        this.$refs['views'].showDia(row.id)
      }
      else {
        this.$refs['views'].showDia()
      }
    },
    save() {
      this.$baseMessage('模拟保存成功', 'success')
      this.$emit('fetch-data')
      this.close()
    },
    moreQuery() {
      this.isShow = !this.isShow
    },
    handleClose(done) {
      if (this.loading) {
        return
      }
      this.$confirm('确定要打印吗？')
        .then((_) => {
          this.loading = true
          this.timer = setTimeout(() => {
            done()
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false
            }, 400)
          }, 2000)
        })
        .catch((_) => { })
    },
    cancelForm() {
      this.loading = false
      this.dialog = false
      this.$emit('fetch-data')
      clearTimeout(this.timer)
    },
    async fetchData() {
      this.listLoading = true
      const { data, totalCount } = await getPublishDeptList(this.queryForm);
      console.log("data",data);
      this.list = data.list
      this.total = data.total
      setTimeout(() => {
        this.listLoading = false
      }, 300)
    },
  },
}
</script>
<style lang="scss" scoped>

.cardpop {
  height: 400px;

  ::v-deep{
    .el-card__body {
      height:calc(100% - 90px);
      overflow-y:auto;
    }
  }
}
</style>